<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <script src="../js/vue.min.js"></script>
	</head>
	<body>


<div id="app">
<ul>
<li v-for="(item, index) in proData">
<label for="">
<input type="checkbox" :value="index" v-model="selectArr">
</label>{{item.name}}
</li>：
</ul>
<button type="" @click="del">删除</button>{{selectArr}}
<label>
<input type="checkbox" class="checkbox" @click="selectAll" />全选
</label>
</div>

<script>
var proData = [{
    "name": "j1ax"
}, {
    "name": "j2ax"
}, {
    "name": "j3ax"
}, {
    "name": "j4ax"
}]


var vm = new Vue({
   el : "#app",
    name: 'hello',
    data() {
        return {
            proData: proData,
            selectArr: []
        }
    },
   
    methods: {
        del() {
            let arr = [];
            var len = this.proData.length;
            for (var i = 0; i < len; i++) {
                if (this.selectArr.indexOf(i)>=0) {
                    console.log(this.selectArr.indexOf(i))
                }else{
                    arr.push(proData[i])
                }
            }

            this.proData = arr;
            this.selectArr = []
        },
        selectAll(event) {
            var _this = this;
            console.log(event.currentTarget)
            if (!event.currentTarget.checked) {
                this.selectArr = [];
            } else { //实现全选
                _this.selectArr = [];
                _this.proData.forEach(function(item, i) {
                    _this.selectArr.push(i);
                });
            }
        }
    }
})
</script>
